<template>
  <div>
    <CommonCard title="今日交易用户数" value="854,485">
      <template>
        <v-echarts :options="getOptions()"></v-echarts>
        <div
          id="today-users-chart"
          :style="{ width: '100%', height: '100%' }"
        />
      </template>
      <template v-slot:footer>
        <span>退货率 </span>
        <span class="emphasis">5.14%</span>
      </template>
    </CommonCard>
  </div>
</template>

<script>
import commonCardMixin from "../../mixins/commonCardMixin";
export default {
  mixins: [commonCardMixin],
  methods: {
    getOptions() {
      return {
        color: ["#3398DB"],
        // x轴
        xAxis: {
          show: false, //隐藏
          type: "category",
          data: [
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
          ],
          // data:[''] 指定坐标
          // boundaryGap: false, //X轴两侧有小小的间距 fasle--极限拉伸 边界 差距
        },
        //  y轴
        yAxis: {
          show: false, // 隐藏
        },
        // 系列 --对应图标
        series: [
          {
            type: "bar",
            data: [
              "552",
              "456",
              "452",
              "341",
              "454",
              "451",
              "212",
              "151",
              "452",
              "354",
              "354",
              "354",
              "354",
            ],
            barWidth: "60%", //柱状图的宽度
            // areaStyle: {
            //   // 面积显示
            //   color: "purple",
            // },
            // lineStyle: {
            //   // 折现的宽度
            //   width: 0,
            // },
            // itemStyle: {
            //   opacity: 0, // 折线图圆点隐藏  --  变透明
            // },
            // smooth: true, // 折线条变的平滑
          },
        ],
        //控制表格
        grid: {
          top: 0,
          bottom: 0,
          right: 0,
          left: 0,
        },
      };
    },
  },
  // mounted() {
  //   // 获取bom;、
  //   const chartDom = document.getElementById("today-users-chart");
  //   console.log("===========", this.$echarts);
  //   const charts = this.$echarts.init(chartDom); //charts 初始化
  //   charts.setOption({
  //     color: ["#3398DB"],
  //     // x轴
  //     xAxis: {
  //       show: false, //隐藏
  //       type: "category",
  //       data: [
  //         "01:00",
  //         "02:00",
  //         "03:00",
  //         "04:00",
  //         "05:00",
  //         "06:00",
  //         "07:00",
  //         "08:00",
  //         "09:00",
  //         "10:00",
  //         "11:00",
  //         "12:00",
  //         "13:00",
  //       ],
  //       // data:[''] 指定坐标
  //       // boundaryGap: false, //X轴两侧有小小的间距 fasle--极限拉伸 边界 差距
  //     },
  //     //  y轴
  //     yAxis: {
  //       show: false, // 隐藏
  //     },
  //     // 系列 --对应图标
  //     series: [
  //       {
  //         type: "bar",
  //         data: [
  //           "552",
  //           "456",
  //           "452",
  //           "341",
  //           "454",
  //           "451",
  //           "212",
  //           "151",
  //           "452",
  //           "354",
  //           "354",
  //           "354",
  //           "354",
  //         ],
  //         barWidth: "60%", //柱状图的宽度
  //         // areaStyle: {
  //         //   // 面积显示
  //         //   color: "purple",
  //         // },
  //         // lineStyle: {
  //         //   // 折现的宽度
  //         //   width: 0,
  //         // },
  //         // itemStyle: {
  //         //   opacity: 0, // 折线图圆点隐藏  --  变透明
  //         // },
  //         // smooth: true, // 折线条变的平滑
  //       },
  //     ],
  //     //控制表格
  //     grid: {
  //       top: 0,
  //       bottom: 0,
  //       right: 0,
  //       left: 0,
  //     },
  //   });
  // },
};
</script>

<style>
</style>